<template>
	<view class="content">
		<view class="mask" v-show="indexDialog">
			<view class="mask_content">
				<image @click="handleClosemask" src="../../static/image/cancel.png" mode="aspectFit" class="cancel"></image>
				<view class="content_left" v-for="(item,index) in dialoglist" :key="index" @click="handleChooseway(item,index)">
					<view class="content_scan">
						<view class="all_content">
							<view class="img">
								<image :src="item.img" mode="aspectFit" class="s_img"></image>
							</view>
							<view class="text">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="lower">
			<view class="scroll-view">
				<view class="top_bg">
					<image class="bg_img" src="../../static/image/top_img.png" mode="aspectFit"></image>
				</view>
				<view class="lb_content">
					<image style="width: 100%;height: 100%;" src="../../static/image/lunbo.png" mode="aspectFit"></image>
					<!-- <u-swiper :list="list1" style="height: 178px;"></u-swiper> -->
				</view>
				<view class="drop_list">
					<view class="drop_left">
						<view class="all_drop common" @click="handleAll">
							{{ all_text }}
							<image class="drop_img" mode="aspectFit"
								:src="showAll ? '../../static/image/drop_down.png' : '../../static/image/drop_up.png'">
							</image>
							<view class="all_content" v-show=showAll>
								<view class="all_item" v-for="(item,index) in all_list" :key="index"
									:class="allActive === index ? 'active_text' : ''"
									@click="handleChooseAll(item,index)">{{ item }}</view>
							</view>
						</view>
						<view class="drop_status common" @click="handleStatus">
							{{ status_text }}
							<image class="drop_img" mode="aspectFit"
								:src="showStatus ? '../../static/image/drop_down.png' : '../../static/image/drop_up.png'">
							</image>
							<view class="all_content" v-show="showStatus">
								<view class="status_item" :class="statusActive === index ? 'active_text' : ''"
									v-for="(item,index) in all_status" :key="index"
									@click="handleChooseStatus(item,index)">
									{{ item.title }}
								</view>
							</view>
						</view>
					</view>
					<view class="drop_right">
						<view class="in_agin" @click="handlelogin">再次录入</view>
					</view>
				</view>
				<view class="no_data" v-show="lotterlist.length === 0">
					<image class="noData_img" src="../../static/image/no_data.png" mode="aspectFit"></image>
					<view class="text_no">当前页面暂无数据点击添加</view>
					<view class="in_data">
						<view class="in_data_btn">
							<image class="add_img" src="../../static/image/add.png" mode="aspectFit"></image>
							录入
						</view>
					</view>
				</view>
				<view class="data_list">
					<view class="list_item" v-for="(item,index) in lotterlist" :key="index">
						<view style="display: flex;justify-content: center;align-items: center;">
							<view class="item_top" v-show="item.type === 1">
								<image class="top_img" src="../../static/image/doubleball.png" mode="aspectFit"></image>
								
							</view>
							<view class="item_top" v-show="item.type === 2">
								<image class="top_img" src="../../static/image/threeD.png" mode="aspectFit"></image>
								
							</view>
							<view class="item_top" v-show="item.type === 3">
								<image class="top_img" src="../../static/image/happyeight.png" mode="aspectFit"></image>
								
							</view>
							<view class="item_top" v-show="item.type === 4">
								<image class="top_img" src="../../static/image/seven.png" mode="aspectFit"></image>
								
							</view>
							<view class="item_top" v-show="item.type === 5">
								<image class="top_img" src="../../static/image/lt.png" mode="aspectFit"></image>
								
							</view>
							<view class="item_top" v-show="item.type === 6">
								<image class="top_img" src="../../static/image/sevenxic.png" mode="aspectFit"></image>
							
							</view>
							<view class="item_top" v-show="item.type === 7">
								<image class="top_img" src="../../static/image/plfive.png" mode="aspectFit"></image>
						
							</view>
							<view class="item_top" v-show="item.type === 8">
								<image class="top_img" src="../../static/image/plthree.png" mode="aspectFit"></image>
							
							</view>
						</view>
						<view class="list_content">
							<view class="text_num">{{ item.periods }}期<text class="text_num_next">{{ item.create_time }}</text></view>
							<view class="list_content_item" >
								<view class="item_num_red">
									<view class="item_red_d">
										<view class="item_num_drag"  v-for="(item1,index) in item.red_drag">{{ item1 }}</view>
										<text style="font-size: 14px;margin-left: 5px;color: #a5a5a5;" v-show="item.red_drag.length > 0">(胆)</text>
									</view>
									<view class="item_red_l">
										<view class="item_num" v-for="(item1,index) in item.red">{{ item1 }}</view>
									</view>
								</view>
								<view style="line-height: 50px;width: 20px;font-weight: bold;color:#a5a5a5 ;text-align: center;">+</view>
								<view class="item_num_blue">
									<view class="item_blue_d"></view>
									<view class="item_blue_l">
										<view class="item_num" v-for="(item1,index) in item.blue">{{ item1 }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-bar" v-if="showBottomBar">
		     <!-- 固定在底部的触底栏 -->
		     触底了！
		</view>
		<u-toast ref="uToast" />
		<view class="content_bottom">
			<C_Tabbar :current-page="0" @handleScanit="handleShowDialog"></C_Tabbar>
		</view>
		 
	</view>
</template>
<script>
	import C_Tabbar from '../common/custom-tab-bar/tabbar.vue'
	export default {
		components: {
			C_Tabbar
		},
		data() {
			return {
				pageIndex:1,
				showBottomBar:false,
				type:0,
				status:'-1',
				indexDialog:false,
				isLoadAll:false, 
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				all_list: [],
				all_status: [
					{
						id:'-1',
						title:'全部'
					},
					{
						id:0,
						title:'待开奖'
					},
					{
						id:1,
						title:'已开奖'
						
					}
				],
				dialoglist:[
					{
						id:0,
						title:'扫票录入',
						img:require('../../static/image/saomiao.png')
					},
					{
						id:1,
						title:'手动录入',
						img:require('../../static/image/head.png')
					}
				],
				showAll: false,
				showStatus: false,
				statusActive: 0,
				allActive: 0,
				all_text: '全部',
				status_text: '状态',
				lotterlist:[]
			}
		},
		computed: {
		    count() {
		      return this.$store.state.count
		    }
		},
		created() {
			this.handleGetlotterylist()
		},
		activated() {
			this.handleGetlotterylist()
		},
		methods: {
			lower(){
				if(this.isLoadAll){
					this.$refs.uToast.show({
						type: 'default',
						message: '没有更多数据',
					})
					return
				}
				this.pageIndex ++
				this.handleGetlotterylist()
			},
			async handleGetlotterylist(){
				let res = await this.$api.getlotterylist(this.type,this.status,this.pageIndex)
				if(res.code === 1 && res.data){
					this.lotterlist = res.data.data
				}
				if(res.code === -1) {
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
				if(res.code === 0) {
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
			},
			async handleGetlotteryTypelist(){
				let res = await this.$api.getlotterytypelist()
				if(res.code === 1 && res.data){
					this.all_list = res.data
				}
			},
			handleAll() {
				this.showAll = !this.showAll
			},
			handleStatus() {
				this.showStatus = !this.showStatus
			},
			handleChooseStatus(item, index) {
				this.status = item.id
				this.statusActive = index
				this.status_text = item.title
				this.handleGetlotterylist()
			},
			handleChooseAll(item, index) {
				this.type = index
				this.allActive = index
				this.all_text = item
				this.handleGetlotterylist()
			},
			handleShowDialog(data){
				this.indexDialog = data
			},
			handleClosemask(){
				this.indexDialog = false
			},
			handlelogin(){
				uni.navigateTo({
					url:'/pages/Manualentry/Manualentry'
				})
			},
			handleChooseway(item,index){
				if(index === 0) {
					uni.navigateTo({
						url:'/pages/ScanCode/ScanCode'
					})
				}else{
					uni.navigateTo({
						url:"/pages/Manualentry/Manualentry"
					})
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.content {
		position: fixed;
		width: 100%;
		background-color: #fff;
		z-index: 1;
		top: 0;
		bottom: 0;
		.mask{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.6);
			z-index: 99999;
			.mask_content{
				.cancel{
					width: 20px;
					height: 20px;
					position: absolute;
					top: -20px;
					right: -5px;
				}
				width: 90%;
				height: 150px;
				position: absolute;
				left: calc(50% - 45%);
				top: 200px;
				display: flex;
				.content_left{
					flex: 0.5;
					@include centerAline();
					.content_scan{
						width: 140px;
						height: 140px;
						background-color: #FFF4F3;
						border-radius: $radius_eight;
						@include centerAline();
						.all_content{
							width: 70px;
							height: 70px;
							.img{
								width: 100%;
								height: 36px;
								display: flex;
								justify-content: center;
								.s_img{
									width: 36px;
									height: 36px;
								}
							}
							.text{
								width: 100%;
								height: 24px;
								margin-top: 4px;
								text-align: center;
								line-height: 24px;
								font-size: $font-size-16;
							}
							
						}
					}
				}
			}
		}
		/* 重点是 scroll 的设置,利用定位过滤掉上、下知道的确定区域,自动铺满可变动区域*/
		.scroll {
			position: absolute;
			width: 100%;
			bottom: 55px;
			top: 0px;
			background: linear-gradient(to bottom, #ffcbb2, #fff);
			box-sizing: border-box;
			/* 隐藏滚动条 */
			overflow: auto;
			scrollbar-width: none;
			/* Firefox */
			-ms-overflow-style: none;

			/* IE10+ */
			&::-webkit-scrollbar {
				display: none;
				/* ChromeSafari */
			}

			.scroll-view {
				width: 100%;
				padding-bottom: $padding-bottom-40;

				.top_bg {
					width: 100%;
					height: 184px;
					position: relative;
					box-sizing: border-box;

					.bg_img {
						width: 100%;
						height: 100%;
					}
				}

				.lb_content {
					width: 355px;
					height: 178px;
					position: absolute;
					top: 40px;
					left: calc(50% - 177.5px);
					z-index: 999;
				}

				.drop_list {
					width: 355px;
					height: 40px;
					margin: 0 auto;
					box-sizing: border-box;
					margin-top: $margin-top;
					display: flex;
					position: relative;

					.drop_left {
						flex: 0.6;

						@include spaceBetween() .common {
							width: 98px;
							height: 40px;
							border: 1px solid $common-color;
							border-radius: $radius_eight;
							font-size: $font-size-14;
							color: $primary_color;
							@include centerAline();
							position: relative;
						}

						.all_drop {
							.drop_img {
								width: 32px;
								height: 32px;
							}
						}

						.drop_status {
							.drop_img {
								width: 32px;
								height: 32px;
							}
						}
					}

					.all_content {
						width: 98px;
						position: absolute;
						top: 45px;
						border-radius: $radius_eight;
						background: #ffffff;
						box-shadow: 3px 3px 3px #d9d9d9,
							-2px -2px 10px #ffffff;
						z-index: 999;

						.all_item {
							width: 98px;
							height: 40px;
							color: $black_color;
							text-align: center;
							line-height: $line-height-40;
							font-size: $font-size-14;
						}

						.status_item {
							width: 98px;
							height: 40px;
							color: $black_color;
							text-align: center;
							line-height: $line-height-40;
							font-size: $font-size-14;
						}

						.active_text {
							color: $primary_color;
						}
					}

					.drop_right {
						flex: 0.4;

						@include Right() .in_agin {
							width: 100px;
							height: 40px;
							color: $white_color;
							text-align: center;
							line-height: $line-height-40;
							border-radius: $radius_eight;
							background: linear-gradient(to right, #FE5941, #F9224F);
						}
					}
				}

				.no_data {
					width: 95%;
					height: 240px;
					margin: 0 auto;
					margin-top: $margin-top-30;
					@include centerAline();
					position: relative;

					.noData_img {
						width: 239px;
						height: 172px;
					}

					.text_no {
						width: 100%;
						height: 40px;
						position: absolute;
						bottom: 55px;
						text-align: center;
						color: $gray_color;
						font-size: $font-size-12;
						line-height: $line-height-40;
					}

					.in_data {
						width: 100%;
						height: 50px;
						position: absolute;
						bottom: 0px;

						.in_data_btn {
							width: 85%;
							height: 50px;
							margin: 0 auto;
							@include centerAline();
							font-size: $font-size-18;
							color: $white_color;
							border-radius: $radius_thirth;
							background: linear-gradient(to right, #FF5A42, #F92350);

							.add_img {
								width: 26px;
								height: 26px;
								margin-right: $margin-right-10;
							}
						}
					}
				}

				.data_list {
					width: 95%;
					margin: 0 auto;
					margin-top: $margin-top-15;
					.list_item{
						width: 100%;
						display: flex;
						// background-color: $white_color;
						// border-radius: $radius_eight;
						border-bottom: 1px solid #ccc;
						.item_top{
							width: 90%;
							margin: 0 auto;
							box-sizing: border-box;
							padding: 10px;
							flex: 0.2;
							.top_img{
								width: 50px;
								height: 50px;
								margin-right: 15px;
							}
							.name_text{
								font-size: $font-size-16;
								font-weight: bold;
								color: $black_color;
							}
						}
						.list_content{
							width: 90%;
							margin: 0 auto;
							margin-top: 10px;
							.text_num{
								margin-left: 5px;
								font-weight: bold;
								font-size: $font-size-16;
								.text_num_next{
									margin-left: 5px;
									font-size: $font-size-12;
									color: #7d7d7d;
								}
							}
							.list_content_item{
								width: 100%;
								box-sizing: border-box;
								margin-bottom: 10px;
								display: flex;
								.item_num_red{
									flex: 0.6;
									.item_red_l{
										display: flex;
										flex-wrap: wrap;
										.item_num{
											width: 26px;
											height: 30px;
											margin-left: 3px;
											text-align: center;
											line-height: 25px;
											font-weight: bold;
											background-image: url('../../static/image/red_ball.png');
											background-size: 100% 100%;
											background-repeat: no-repeat;
											font-weight: bold;
											font-size: $font-size-12;
											color: $white_color;
										}
									}
									.item_red_d{
										display: flex;
										flex-wrap: wrap;
										.item_num_drag{
											width: 25px;
											height: 30px;
											margin-left: 3px;
											text-align: center;
											line-height: 25px;
											font-weight: bold;
											background-image: url('../../static/image/z_text_ball.png');
											background-size: 100% 100%;
											background-repeat: no-repeat;
											font-weight: bold;
											font-size: $font-size-12;
											color: $white_color;
										}
									}
								}
								.item_num_blue{
									flex: 0.4;
									.item_blue_l{
										display: flex;
										flex-wrap: wrap;
										.item_num{
											width: 26px;
											height: 30px;
											margin-left: 3px;
											text-align: center;
											line-height: 25px;
											font-weight: bold;
											background-image: url('../../static/image/blue_ball.png');
											background-size: 100% 100%;
											background-repeat: no-repeat;
											font-weight: bold;
											font-size: $font-size-12;
											color: $white_color;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.content_bottom {
			bottom: 0;
			width: 100%;
			height: 55px;
		}
		.bottom-bar {
		  position: fixed;
		  left: 0;
		  right: 0;
		  bottom: 55px;
		  height: 50px;
		  background-color: #333;
		  color: white;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
	}
</style>